<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    // 事件 => 事情发生,并得到处理的操作
    // 1. 绑定事件(页面加载时,提前和浏览器约定好事件发生时要执行的内容)
    // 2. 事件触发之后 -> 浏览器监听到触发行为,执行既定的函数

    var box = document.querySelector(".box");

    // 常见的JS事件
    // 2. 鼠标相关
    // onclick     鼠标左键单击时触发(鼠标左键,按下并松开)
    // ondblclick  鼠标左键双击时触发(鼠标左键,双击)

    // onmousedown  鼠标左/中/右键按下时触发  (鼠标左中右均可触发)
    // onmousemove  鼠标在元素内移动时,触发此事件 (鼠标左中右均可触发)
    // onmouseup    鼠标在元素内松开时,触发此事件 (鼠标左中右均可触发)

    // onmouseover  鼠标移入元素时触发
    // onmouseout  鼠标移入元素时触发

    // onwheel 鼠标滚轮滚动时触发

    // box.onclick = function () {
    //     console.log("box被点击");
    // }

    // box.ondblclick = function () {
    //     console.log("box被双击");
    // }

    // box.onmousedown = function (e) {// 事件函数中可以接收一个形参 => 表示事件发生时的相关信息  => 事件对象(e:event)
    //     console.log(e);
    //     console.log("鼠标在box上按下时触发", e.button); // 事件触发时鼠标按下的按键 (左:0 中:1  右键:2)
    // }

    // box.onmousemove = function () {
    //     console.log("鼠标在box内移动时,触发此事件");
    // }

    // box.onmouseup = function () {
    //     console.log("鼠标在box内松开时,触发此事件");
    // }

    // box.onmouseover = function () {
    //     console.log("鼠标移入box");
    // }
    // box.onmouseout = function () {
    //     console.log("鼠标移出box");
    // }


    // window.onwheel = function (e) {
    //     console.log("鼠标滚动轮动时触发", e);
    // }




</script>

</html>